<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>印记中文 | 卡夫卡的岛上书店</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/blogs/blogs/favicon.ico">
    <meta name="description" content="卡夫卡的岛上书店是凯小默的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="凯小默,凯小默的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco,卡夫卡,岛上书店,卡夫卡的岛上书店,音乐,电影,书籍">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blogs/assets/css/0.styles.6da96bf9.css" as="style"><link rel="preload" href="/blogs/assets/js/app.c4a9ac0d.js" as="script"><link rel="preload" href="/blogs/assets/js/2.a11320bc.js" as="script"><link rel="preload" href="/blogs/assets/js/31.beec2977.js" as="script"><link rel="preload" href="/blogs/assets/js/6.b06f02ee.js" as="script"><link rel="prefetch" href="/blogs/assets/js/10.5d7eb8fd.js"><link rel="prefetch" href="/blogs/assets/js/100.58d50392.js"><link rel="prefetch" href="/blogs/assets/js/101.d3f91f4b.js"><link rel="prefetch" href="/blogs/assets/js/102.3e599175.js"><link rel="prefetch" href="/blogs/assets/js/103.ecbcba9d.js"><link rel="prefetch" href="/blogs/assets/js/104.b7112fb5.js"><link rel="prefetch" href="/blogs/assets/js/105.c26464ae.js"><link rel="prefetch" href="/blogs/assets/js/106.cafe382c.js"><link rel="prefetch" href="/blogs/assets/js/107.895a1efe.js"><link rel="prefetch" href="/blogs/assets/js/108.896c97cc.js"><link rel="prefetch" href="/blogs/assets/js/109.4e94f990.js"><link rel="prefetch" href="/blogs/assets/js/11.d5d2ab49.js"><link rel="prefetch" href="/blogs/assets/js/110.7d958736.js"><link rel="prefetch" href="/blogs/assets/js/111.efc15dc2.js"><link rel="prefetch" href="/blogs/assets/js/112.066210e5.js"><link rel="prefetch" href="/blogs/assets/js/113.351c51de.js"><link rel="prefetch" href="/blogs/assets/js/114.63ac2fda.js"><link rel="prefetch" href="/blogs/assets/js/115.fcbc525c.js"><link rel="prefetch" href="/blogs/assets/js/116.d91cc793.js"><link rel="prefetch" href="/blogs/assets/js/117.de85e622.js"><link rel="prefetch" href="/blogs/assets/js/118.a81f51fb.js"><link rel="prefetch" href="/blogs/assets/js/119.4bd195dd.js"><link rel="prefetch" href="/blogs/assets/js/12.625f8a5f.js"><link rel="prefetch" href="/blogs/assets/js/120.1fd285ff.js"><link rel="prefetch" href="/blogs/assets/js/121.fed4aa6f.js"><link rel="prefetch" href="/blogs/assets/js/122.4d79c2d1.js"><link rel="prefetch" href="/blogs/assets/js/123.fe541236.js"><link rel="prefetch" href="/blogs/assets/js/124.626d03de.js"><link rel="prefetch" href="/blogs/assets/js/125.4b1e9e09.js"><link rel="prefetch" href="/blogs/assets/js/126.84a3bf03.js"><link rel="prefetch" href="/blogs/assets/js/127.a9588eb7.js"><link rel="prefetch" href="/blogs/assets/js/128.77eee453.js"><link rel="prefetch" href="/blogs/assets/js/129.381ba64b.js"><link rel="prefetch" href="/blogs/assets/js/13.5971ebf1.js"><link rel="prefetch" href="/blogs/assets/js/130.4bc05626.js"><link rel="prefetch" href="/blogs/assets/js/131.ced68191.js"><link rel="prefetch" href="/blogs/assets/js/132.2a9833e3.js"><link rel="prefetch" href="/blogs/assets/js/133.da1e1df5.js"><link rel="prefetch" href="/blogs/assets/js/134.49218225.js"><link rel="prefetch" href="/blogs/assets/js/135.d228a910.js"><link rel="prefetch" href="/blogs/assets/js/136.d434a2a2.js"><link rel="prefetch" href="/blogs/assets/js/137.b0146900.js"><link rel="prefetch" href="/blogs/assets/js/138.9cce5814.js"><link rel="prefetch" href="/blogs/assets/js/139.f2c81b1b.js"><link rel="prefetch" href="/blogs/assets/js/14.7b32961c.js"><link rel="prefetch" href="/blogs/assets/js/140.53f770a1.js"><link rel="prefetch" href="/blogs/assets/js/141.e6fa1d98.js"><link rel="prefetch" href="/blogs/assets/js/142.62c55e8f.js"><link rel="prefetch" href="/blogs/assets/js/143.7549f438.js"><link rel="prefetch" href="/blogs/assets/js/144.ced6cbde.js"><link rel="prefetch" href="/blogs/assets/js/145.add84a23.js"><link rel="prefetch" href="/blogs/assets/js/146.201bba6f.js"><link rel="prefetch" href="/blogs/assets/js/147.004fd933.js"><link rel="prefetch" href="/blogs/assets/js/148.00d4af92.js"><link rel="prefetch" href="/blogs/assets/js/149.11c4409f.js"><link rel="prefetch" href="/blogs/assets/js/15.675ad06f.js"><link rel="prefetch" href="/blogs/assets/js/150.f33a8128.js"><link rel="prefetch" href="/blogs/assets/js/151.fdc17b21.js"><link rel="prefetch" href="/blogs/assets/js/152.a1ce7a18.js"><link rel="prefetch" href="/blogs/assets/js/153.5bb63f69.js"><link rel="prefetch" href="/blogs/assets/js/154.3607e484.js"><link rel="prefetch" href="/blogs/assets/js/155.511078f5.js"><link rel="prefetch" href="/blogs/assets/js/156.d5009c87.js"><link rel="prefetch" href="/blogs/assets/js/157.0a824cf6.js"><link rel="prefetch" href="/blogs/assets/js/158.c0603bdb.js"><link rel="prefetch" href="/blogs/assets/js/159.25b58ba7.js"><link rel="prefetch" href="/blogs/assets/js/16.6a27361b.js"><link rel="prefetch" href="/blogs/assets/js/160.c34ef543.js"><link rel="prefetch" href="/blogs/assets/js/161.b9e02baa.js"><link rel="prefetch" href="/blogs/assets/js/162.75018745.js"><link rel="prefetch" href="/blogs/assets/js/163.f0a369c5.js"><link rel="prefetch" href="/blogs/assets/js/164.d32c676e.js"><link rel="prefetch" href="/blogs/assets/js/165.9e2d795b.js"><link rel="prefetch" href="/blogs/assets/js/166.eecf5c64.js"><link rel="prefetch" href="/blogs/assets/js/167.d9bd5a2d.js"><link rel="prefetch" href="/blogs/assets/js/168.3fb76fbd.js"><link rel="prefetch" href="/blogs/assets/js/169.cfc08632.js"><link rel="prefetch" href="/blogs/assets/js/17.faeecc08.js"><link rel="prefetch" href="/blogs/assets/js/170.a5fce106.js"><link rel="prefetch" href="/blogs/assets/js/171.6c09228f.js"><link rel="prefetch" href="/blogs/assets/js/172.1e92dde8.js"><link rel="prefetch" href="/blogs/assets/js/173.95a786d0.js"><link rel="prefetch" href="/blogs/assets/js/174.489b6abf.js"><link rel="prefetch" href="/blogs/assets/js/175.f13f9492.js"><link rel="prefetch" href="/blogs/assets/js/176.9edf5422.js"><link rel="prefetch" href="/blogs/assets/js/177.a4d3f831.js"><link rel="prefetch" href="/blogs/assets/js/178.8ab2c620.js"><link rel="prefetch" href="/blogs/assets/js/179.76d199f5.js"><link rel="prefetch" href="/blogs/assets/js/18.be67149b.js"><link rel="prefetch" href="/blogs/assets/js/180.f8a53ddf.js"><link rel="prefetch" href="/blogs/assets/js/181.820d0270.js"><link rel="prefetch" href="/blogs/assets/js/182.f73bb8f9.js"><link rel="prefetch" href="/blogs/assets/js/183.d740b6fa.js"><link rel="prefetch" href="/blogs/assets/js/184.ea8a5b60.js"><link rel="prefetch" href="/blogs/assets/js/185.d2c8498b.js"><link rel="prefetch" href="/blogs/assets/js/186.abc0d54e.js"><link rel="prefetch" href="/blogs/assets/js/187.bdbc0e80.js"><link rel="prefetch" href="/blogs/assets/js/188.0189b94c.js"><link rel="prefetch" href="/blogs/assets/js/189.c85a4414.js"><link rel="prefetch" href="/blogs/assets/js/19.4988d564.js"><link rel="prefetch" href="/blogs/assets/js/190.236c416e.js"><link rel="prefetch" href="/blogs/assets/js/191.c7ab4472.js"><link rel="prefetch" href="/blogs/assets/js/192.17ab9df0.js"><link rel="prefetch" href="/blogs/assets/js/193.a21b5daa.js"><link rel="prefetch" href="/blogs/assets/js/194.f4e81371.js"><link rel="prefetch" href="/blogs/assets/js/195.c76aa31c.js"><link rel="prefetch" href="/blogs/assets/js/196.54e7d532.js"><link rel="prefetch" href="/blogs/assets/js/197.2d4a6310.js"><link rel="prefetch" href="/blogs/assets/js/198.7eb044c3.js"><link rel="prefetch" href="/blogs/assets/js/199.7d2a5a03.js"><link rel="prefetch" href="/blogs/assets/js/20.4b566c4e.js"><link rel="prefetch" href="/blogs/assets/js/200.7eef2a3d.js"><link rel="prefetch" href="/blogs/assets/js/201.069b4ab3.js"><link rel="prefetch" href="/blogs/assets/js/202.e2ed4b81.js"><link rel="prefetch" href="/blogs/assets/js/203.b024c086.js"><link rel="prefetch" href="/blogs/assets/js/204.45908a5d.js"><link rel="prefetch" href="/blogs/assets/js/205.d408484e.js"><link rel="prefetch" href="/blogs/assets/js/206.e5813f6b.js"><link rel="prefetch" href="/blogs/assets/js/207.1c12ac10.js"><link rel="prefetch" href="/blogs/assets/js/208.3ccdde2a.js"><link rel="prefetch" href="/blogs/assets/js/209.d3eca9f5.js"><link rel="prefetch" href="/blogs/assets/js/21.2f105b85.js"><link rel="prefetch" href="/blogs/assets/js/210.6204aeda.js"><link rel="prefetch" href="/blogs/assets/js/211.9859f74c.js"><link rel="prefetch" href="/blogs/assets/js/212.2b720ed3.js"><link rel="prefetch" href="/blogs/assets/js/213.c95a36dc.js"><link rel="prefetch" href="/blogs/assets/js/214.d83932f0.js"><link rel="prefetch" href="/blogs/assets/js/215.8b214281.js"><link rel="prefetch" href="/blogs/assets/js/216.ac070735.js"><link rel="prefetch" href="/blogs/assets/js/217.c7cd14c4.js"><link rel="prefetch" href="/blogs/assets/js/218.6abb414a.js"><link rel="prefetch" href="/blogs/assets/js/219.71419497.js"><link rel="prefetch" href="/blogs/assets/js/22.a71f72e5.js"><link rel="prefetch" href="/blogs/assets/js/220.22066f9f.js"><link rel="prefetch" href="/blogs/assets/js/221.20a92843.js"><link rel="prefetch" href="/blogs/assets/js/222.b7de5515.js"><link rel="prefetch" href="/blogs/assets/js/223.4109d4cf.js"><link rel="prefetch" href="/blogs/assets/js/224.e678a0e1.js"><link rel="prefetch" href="/blogs/assets/js/225.0ae91a9f.js"><link rel="prefetch" href="/blogs/assets/js/226.1fbdb6f7.js"><link rel="prefetch" href="/blogs/assets/js/227.ab2c9870.js"><link rel="prefetch" href="/blogs/assets/js/228.6c8df33f.js"><link rel="prefetch" href="/blogs/assets/js/229.0b6f4fc1.js"><link rel="prefetch" href="/blogs/assets/js/23.f6d57e29.js"><link rel="prefetch" href="/blogs/assets/js/230.723ee342.js"><link rel="prefetch" href="/blogs/assets/js/231.3174f8f6.js"><link rel="prefetch" href="/blogs/assets/js/232.c2b76211.js"><link rel="prefetch" href="/blogs/assets/js/233.9556cd61.js"><link rel="prefetch" href="/blogs/assets/js/234.92da14e8.js"><link rel="prefetch" href="/blogs/assets/js/235.b0c86693.js"><link rel="prefetch" href="/blogs/assets/js/236.63e87e5f.js"><link rel="prefetch" href="/blogs/assets/js/237.b4b2ea79.js"><link rel="prefetch" href="/blogs/assets/js/238.82cd9d87.js"><link rel="prefetch" href="/blogs/assets/js/239.cd4a0617.js"><link rel="prefetch" href="/blogs/assets/js/24.08137534.js"><link rel="prefetch" href="/blogs/assets/js/240.6e8db13e.js"><link rel="prefetch" href="/blogs/assets/js/241.f026e9d3.js"><link rel="prefetch" href="/blogs/assets/js/242.43c3bf4f.js"><link rel="prefetch" href="/blogs/assets/js/243.6edf58b4.js"><link rel="prefetch" href="/blogs/assets/js/244.c9770587.js"><link rel="prefetch" href="/blogs/assets/js/245.cc55cdec.js"><link rel="prefetch" href="/blogs/assets/js/246.3f41e305.js"><link rel="prefetch" href="/blogs/assets/js/247.019635db.js"><link rel="prefetch" href="/blogs/assets/js/248.f00169ed.js"><link rel="prefetch" href="/blogs/assets/js/249.a2193d5e.js"><link rel="prefetch" href="/blogs/assets/js/25.bec0cac3.js"><link rel="prefetch" href="/blogs/assets/js/250.9f62eb82.js"><link rel="prefetch" href="/blogs/assets/js/251.4bc7c48f.js"><link rel="prefetch" href="/blogs/assets/js/252.8f0ae3e5.js"><link rel="prefetch" href="/blogs/assets/js/253.bfa367bc.js"><link rel="prefetch" href="/blogs/assets/js/254.c2613d6d.js"><link rel="prefetch" href="/blogs/assets/js/255.a96f4223.js"><link rel="prefetch" href="/blogs/assets/js/256.a10bcf70.js"><link rel="prefetch" href="/blogs/assets/js/257.3036d8af.js"><link rel="prefetch" href="/blogs/assets/js/258.adf49845.js"><link rel="prefetch" href="/blogs/assets/js/259.44b45702.js"><link rel="prefetch" href="/blogs/assets/js/26.e47ac3c2.js"><link rel="prefetch" href="/blogs/assets/js/260.06c936a0.js"><link rel="prefetch" href="/blogs/assets/js/261.0312573a.js"><link rel="prefetch" href="/blogs/assets/js/262.be1125e8.js"><link rel="prefetch" href="/blogs/assets/js/263.37fc07f6.js"><link rel="prefetch" href="/blogs/assets/js/264.1eca2fa6.js"><link rel="prefetch" href="/blogs/assets/js/265.581a03a6.js"><link rel="prefetch" href="/blogs/assets/js/266.5e1f66da.js"><link rel="prefetch" href="/blogs/assets/js/267.c5562c99.js"><link rel="prefetch" href="/blogs/assets/js/268.db3b6351.js"><link rel="prefetch" href="/blogs/assets/js/269.2f496567.js"><link rel="prefetch" href="/blogs/assets/js/27.a761f1b4.js"><link rel="prefetch" href="/blogs/assets/js/270.08bdf7ea.js"><link rel="prefetch" href="/blogs/assets/js/271.93825664.js"><link rel="prefetch" href="/blogs/assets/js/272.5b9eb933.js"><link rel="prefetch" href="/blogs/assets/js/273.810a866e.js"><link rel="prefetch" href="/blogs/assets/js/274.790aa856.js"><link rel="prefetch" href="/blogs/assets/js/275.1d7d1d14.js"><link rel="prefetch" href="/blogs/assets/js/276.7e495a0c.js"><link rel="prefetch" href="/blogs/assets/js/277.e25c06a9.js"><link rel="prefetch" href="/blogs/assets/js/278.e38d0bd9.js"><link rel="prefetch" href="/blogs/assets/js/279.8c2eee52.js"><link rel="prefetch" href="/blogs/assets/js/28.30db7b1e.js"><link rel="prefetch" href="/blogs/assets/js/280.4ac0a14c.js"><link rel="prefetch" href="/blogs/assets/js/281.37ac3da3.js"><link rel="prefetch" href="/blogs/assets/js/282.f08e4c7e.js"><link rel="prefetch" href="/blogs/assets/js/283.891c68fe.js"><link rel="prefetch" href="/blogs/assets/js/284.dd3afcbe.js"><link rel="prefetch" href="/blogs/assets/js/285.d9ccfd9d.js"><link rel="prefetch" href="/blogs/assets/js/286.b2e64de4.js"><link rel="prefetch" href="/blogs/assets/js/287.baea5511.js"><link rel="prefetch" href="/blogs/assets/js/288.8093d412.js"><link rel="prefetch" href="/blogs/assets/js/289.b54e228b.js"><link rel="prefetch" href="/blogs/assets/js/29.71946b19.js"><link rel="prefetch" href="/blogs/assets/js/290.1caf7beb.js"><link rel="prefetch" href="/blogs/assets/js/291.8ba4ff37.js"><link rel="prefetch" href="/blogs/assets/js/3.c84ff1ce.js"><link rel="prefetch" href="/blogs/assets/js/30.cae4b0c2.js"><link rel="prefetch" href="/blogs/assets/js/32.812b083e.js"><link rel="prefetch" href="/blogs/assets/js/33.ce6a8a01.js"><link rel="prefetch" href="/blogs/assets/js/34.d8a8072a.js"><link rel="prefetch" href="/blogs/assets/js/35.cb894856.js"><link rel="prefetch" href="/blogs/assets/js/36.cdc5b737.js"><link rel="prefetch" href="/blogs/assets/js/37.c751f4b3.js"><link rel="prefetch" href="/blogs/assets/js/38.654e3020.js"><link rel="prefetch" href="/blogs/assets/js/39.19af7505.js"><link rel="prefetch" href="/blogs/assets/js/4.e31e2f42.js"><link rel="prefetch" href="/blogs/assets/js/40.dab2fc5a.js"><link rel="prefetch" href="/blogs/assets/js/41.069f5955.js"><link rel="prefetch" href="/blogs/assets/js/42.2ad4d631.js"><link rel="prefetch" href="/blogs/assets/js/43.6a8a1a3a.js"><link rel="prefetch" href="/blogs/assets/js/44.7f0371f7.js"><link rel="prefetch" href="/blogs/assets/js/45.546f7e99.js"><link rel="prefetch" href="/blogs/assets/js/46.700d655a.js"><link rel="prefetch" href="/blogs/assets/js/47.5fc3769d.js"><link rel="prefetch" href="/blogs/assets/js/48.02bddba7.js"><link rel="prefetch" href="/blogs/assets/js/49.bc986450.js"><link rel="prefetch" href="/blogs/assets/js/5.b90df075.js"><link rel="prefetch" href="/blogs/assets/js/50.521274f1.js"><link rel="prefetch" href="/blogs/assets/js/51.f9973e9c.js"><link rel="prefetch" href="/blogs/assets/js/52.49062bfe.js"><link rel="prefetch" href="/blogs/assets/js/53.3c409809.js"><link rel="prefetch" href="/blogs/assets/js/54.8e4bc1d2.js"><link rel="prefetch" href="/blogs/assets/js/55.7c98e42f.js"><link rel="prefetch" href="/blogs/assets/js/56.e24105d2.js"><link rel="prefetch" href="/blogs/assets/js/57.6848cce1.js"><link rel="prefetch" href="/blogs/assets/js/58.5d1f219e.js"><link rel="prefetch" href="/blogs/assets/js/59.039508ac.js"><link rel="prefetch" href="/blogs/assets/js/60.cc53c007.js"><link rel="prefetch" href="/blogs/assets/js/61.de065123.js"><link rel="prefetch" href="/blogs/assets/js/62.6fda3ca3.js"><link rel="prefetch" href="/blogs/assets/js/63.4236ef4b.js"><link rel="prefetch" href="/blogs/assets/js/64.f1487e44.js"><link rel="prefetch" href="/blogs/assets/js/65.32fba8f2.js"><link rel="prefetch" href="/blogs/assets/js/66.13adcea1.js"><link rel="prefetch" href="/blogs/assets/js/67.82d67e36.js"><link rel="prefetch" href="/blogs/assets/js/68.b4b34079.js"><link rel="prefetch" href="/blogs/assets/js/69.a3465ebd.js"><link rel="prefetch" href="/blogs/assets/js/7.a1cd7f66.js"><link rel="prefetch" href="/blogs/assets/js/70.2a1dd83f.js"><link rel="prefetch" href="/blogs/assets/js/71.93a1ddc9.js"><link rel="prefetch" href="/blogs/assets/js/72.3acced1a.js"><link rel="prefetch" href="/blogs/assets/js/73.1640c847.js"><link rel="prefetch" href="/blogs/assets/js/74.4125ce85.js"><link rel="prefetch" href="/blogs/assets/js/75.ee821f14.js"><link rel="prefetch" href="/blogs/assets/js/76.fc724a08.js"><link rel="prefetch" href="/blogs/assets/js/77.dd15769c.js"><link rel="prefetch" href="/blogs/assets/js/78.31c80a7b.js"><link rel="prefetch" href="/blogs/assets/js/79.af451c09.js"><link rel="prefetch" href="/blogs/assets/js/8.cbf54ac0.js"><link rel="prefetch" href="/blogs/assets/js/80.0cb8db56.js"><link rel="prefetch" href="/blogs/assets/js/81.7bafd146.js"><link rel="prefetch" href="/blogs/assets/js/82.c22b8301.js"><link rel="prefetch" href="/blogs/assets/js/83.e44d74cd.js"><link rel="prefetch" href="/blogs/assets/js/84.fd2d8d0a.js"><link rel="prefetch" href="/blogs/assets/js/85.cd40fd72.js"><link rel="prefetch" href="/blogs/assets/js/86.d81b7850.js"><link rel="prefetch" href="/blogs/assets/js/87.2a53ea0d.js"><link rel="prefetch" href="/blogs/assets/js/88.4b78c3ac.js"><link rel="prefetch" href="/blogs/assets/js/89.f002b20f.js"><link rel="prefetch" href="/blogs/assets/js/9.73b90ff8.js"><link rel="prefetch" href="/blogs/assets/js/90.0ee150aa.js"><link rel="prefetch" href="/blogs/assets/js/91.4980d2e3.js"><link rel="prefetch" href="/blogs/assets/js/92.3c904a3f.js"><link rel="prefetch" href="/blogs/assets/js/93.c9a17b8b.js"><link rel="prefetch" href="/blogs/assets/js/94.c49d9982.js"><link rel="prefetch" href="/blogs/assets/js/95.53dd1d74.js"><link rel="prefetch" href="/blogs/assets/js/96.45635662.js"><link rel="prefetch" href="/blogs/assets/js/97.e60d07fc.js"><link rel="prefetch" href="/blogs/assets/js/98.a1558f22.js"><link rel="prefetch" href="/blogs/assets/js/99.a82bf309.js">
    <link rel="stylesheet" href="/blogs/assets/css/0.styles.6da96bf9.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-3a334c6d data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-3a334c6d><img src="/blogs/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-3a334c6d></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blogs/" class="home-link router-link-active"><img src="/blogs/img/kmc.jpg" alt="卡夫卡的岛上书店" class="logo"> <span class="site-name">卡夫卡的岛上书店</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blogs/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/web/" class="nav-link router-link-active"><i></i>前端
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/docschina/" aria-current="page" class="nav-link router-link-exact-active router-link-active"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li><li class="dropdown-item"><h4>专栏笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/column-notes/33-js/" class="nav-link"><i class="iconfont reco-blog"></i>JavaScript的33个概念
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/relearn-frontend/" class="nav-link"><i class="iconfont reco-blog"></i>重学前端
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/http-protocol/" class="nav-link"><i class="iconfont reco-blog"></i>透视HTTP协议
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/play-webpack/" class="nav-link"><i class="iconfont reco-blog"></i>玩转webpack
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/browser-principle/" class="nav-link"><i class="iconfont reco-blog"></i>浏览器工作原理与实践
</a></li></ul></li><li class="dropdown-item"><h4>书籍笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/book-notes/donot-know-javascript/" class="nav-link"><i class="iconfont reco-blog"></i>你不知道的JavaScript
</a></li></ul></li><li class="dropdown-item"><h4>推荐博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/ruanyifeng/" class="nav-link"><i class="iconfont reco-blog"></i>阮一峰的个人网站
</a></li><li class="dropdown-subitem"><a href="/blogs/web/liaoxuefeng/" class="nav-link"><i class="iconfont reco-blog"></i>廖雪峰的官方网站
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/library/" class="nav-link"><i></i>图书馆
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>太易</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/map/" class="nav-link"><i class="iconfont reco-blog"></i>时间地图
</a></li></ul></li><li class="dropdown-item"><h4>太初</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>中文维基百科
</a></li></ul></li><li class="dropdown-item"><h4>太始</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wdl/" class="nav-link"><i class="iconfont reco-blog"></i>世界数字图书馆
</a></li></ul></li><li class="dropdown-item"><h4>太素</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/douban/" class="nav-link"><i class="iconfont reco-blog"></i>豆瓣榜单
</a></li><li class="dropdown-subitem"><a href="/blogs/library/open163/" class="nav-link"><i class="iconfont reco-blog"></i>网易公开课
</a></li></ul></li><li class="dropdown-item"><h4>太极</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/shici/" class="nav-link"><i class="iconfont reco-blog"></i>中华诗词
</a></li><li class="dropdown-subitem"><a href="/blogs/library/processon/" class="nav-link"><i class="iconfont reco-blog"></i>ProcessOn图形化知识资源
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/idealism/" class="nav-link"><i></i>昨日与明日
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>昨日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/music/" class="nav-link"><i class="iconfont reco-blog"></i>音乐
</a></li></ul></li><li class="dropdown-item"><h4>今日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/philosophy/" class="nav-link"><i class="iconfont reco-blog"></i>哲学
</a></li></ul></li><li class="dropdown-item"><h4>明日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/kaimo/" class="nav-link"><i class="iconfont reco-blog"></i>忧伤的年轻人
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blogs/sitemap/" class="nav-link"><i class="iconfont reco-blog"></i>总目录
</a></li><li class="dropdown-item"><!----> <a href="/blogs/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/blogs/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/blogs/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/blogs/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://blog.csdn.net/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-csdn"></i>CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>联系店长
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/bookshop/explain/" class="nav-link"><i class="iconfont reco-document"></i>博客说明
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/logs/" class="nav-link"><i class="iconfont reco-document"></i>更新日志
</a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/resource-tools/" class="nav-link"><i class="iconfont reco-document"></i>资源工具
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/blogs/img/avatar.jpg" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    凯小默
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>224</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    standing on the shoulders of giants
  </div> <ul class="social-links" data-v-34faaed8><li class="social-item" data-v-34faaed8><i class="iconfont reco-csdn" style="color:#fc5531;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-mayun" style="color:#c71d24;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-bilibili" style="color:#fb7299;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-github" style="color:#3eaf7c;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-mail" style="color:#00a1d6;" data-v-34faaed8></i></li></ul></div> <nav class="nav-links"><div class="nav-item"><a href="/blogs/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/web/" class="nav-link router-link-active"><i></i>前端
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/docschina/" aria-current="page" class="nav-link router-link-exact-active router-link-active"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li><li class="dropdown-item"><h4>专栏笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/column-notes/33-js/" class="nav-link"><i class="iconfont reco-blog"></i>JavaScript的33个概念
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/relearn-frontend/" class="nav-link"><i class="iconfont reco-blog"></i>重学前端
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/http-protocol/" class="nav-link"><i class="iconfont reco-blog"></i>透视HTTP协议
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/play-webpack/" class="nav-link"><i class="iconfont reco-blog"></i>玩转webpack
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/browser-principle/" class="nav-link"><i class="iconfont reco-blog"></i>浏览器工作原理与实践
</a></li></ul></li><li class="dropdown-item"><h4>书籍笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/book-notes/donot-know-javascript/" class="nav-link"><i class="iconfont reco-blog"></i>你不知道的JavaScript
</a></li></ul></li><li class="dropdown-item"><h4>推荐博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/ruanyifeng/" class="nav-link"><i class="iconfont reco-blog"></i>阮一峰的个人网站
</a></li><li class="dropdown-subitem"><a href="/blogs/web/liaoxuefeng/" class="nav-link"><i class="iconfont reco-blog"></i>廖雪峰的官方网站
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/library/" class="nav-link"><i></i>图书馆
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>太易</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/map/" class="nav-link"><i class="iconfont reco-blog"></i>时间地图
</a></li></ul></li><li class="dropdown-item"><h4>太初</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>中文维基百科
</a></li></ul></li><li class="dropdown-item"><h4>太始</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wdl/" class="nav-link"><i class="iconfont reco-blog"></i>世界数字图书馆
</a></li></ul></li><li class="dropdown-item"><h4>太素</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/douban/" class="nav-link"><i class="iconfont reco-blog"></i>豆瓣榜单
</a></li><li class="dropdown-subitem"><a href="/blogs/library/open163/" class="nav-link"><i class="iconfont reco-blog"></i>网易公开课
</a></li></ul></li><li class="dropdown-item"><h4>太极</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/shici/" class="nav-link"><i class="iconfont reco-blog"></i>中华诗词
</a></li><li class="dropdown-subitem"><a href="/blogs/library/processon/" class="nav-link"><i class="iconfont reco-blog"></i>ProcessOn图形化知识资源
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/idealism/" class="nav-link"><i></i>昨日与明日
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>昨日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/music/" class="nav-link"><i class="iconfont reco-blog"></i>音乐
</a></li></ul></li><li class="dropdown-item"><h4>今日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/philosophy/" class="nav-link"><i class="iconfont reco-blog"></i>哲学
</a></li></ul></li><li class="dropdown-item"><h4>明日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/kaimo/" class="nav-link"><i class="iconfont reco-blog"></i>忧伤的年轻人
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blogs/sitemap/" class="nav-link"><i class="iconfont reco-blog"></i>总目录
</a></li><li class="dropdown-item"><!----> <a href="/blogs/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/blogs/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/blogs/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/blogs/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://blog.csdn.net/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-csdn"></i>CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>联系店长
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/bookshop/explain/" class="nav-link"><i class="iconfont reco-document"></i>博客说明
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/logs/" class="nav-link"><i class="iconfont reco-document"></i>更新日志
</a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/resource-tools/" class="nav-link"><i class="iconfont reco-document"></i>资源工具
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>文档教程</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blogs/web/docs/imooc/wiki/" class="sidebar-link">慕课教程</a></li><li><a href="/blogs/web/docs/es6/" class="sidebar-link">ES6 入门教程</a></li><li><a href="/blogs/web/docs/wangdoc/javascript/" class="sidebar-link">网道-JavaScript 教程</a></li><li><a href="/blogs/web/docs/react/" class="sidebar-link">React 中文文档</a></li><li><a href="/blogs/web/docs/vue/" class="sidebar-link">Vue 中文文档</a></li><li><a href="/blogs/web/docs/node/" class="sidebar-link">Node 中文文档</a></li><li><a href="/blogs/web/docs/babel/" class="sidebar-link">Babel 中文文档</a></li><li><a href="/blogs/web/docs/webpack/" class="sidebar-link">Webpack 文档</a></li><li><a href="/blogs/web/docs/typescript/" class="sidebar-link">TypeScript 文档</a></li><li><a href="/blogs/web/docs/angular/" class="sidebar-link">Angular 文档</a></li><li><a href="/blogs/web/docs/runoob/" class="sidebar-link">菜鸟教程</a></li><li><a href="/blogs/web/docs/docschina/" aria-current="page" class="active sidebar-link">印记中文</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Html</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Jquery</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>UI 库</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Git</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>可视化</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>LeetCode</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>推荐博客</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>面试</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>工具插件</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-3"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/blogs/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/blogs/web/" title="前端-目录页" class="router-link-active" data-v-13f19dad>前端</a></li> <li data-v-13f19dad><a href="/blogs/web/#文档教程" title="前端#文档教程" data-v-13f19dad>文档教程</a></li> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>凯小默</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2021/03/02 09:50:11</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            印记中文
          </h1> <div class="theme-vdoing-content content__default"><h2 id="语言文档和规范"><a href="#语言文档和规范" class="header-anchor">#</a> 语言文档和规范</h2> <div class="cardListContainer"><div class="card-list"><a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank" class="card-item row-3"><img src="https://developer.mozilla.org/static/img/favicon144.e7e21ca263ca.png" class="no-zoom"> <div><p class="name">MDN</p> <p title="提供 Web 技术文档，学习 Web 开发的最佳实践" class="desc">提供 Web 技术文档，学习 Web 开发的最佳实践</p></div></a> <a href="https://ecma262.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/ecma.svg" class="no-zoom"> <div><p class="name">ECMAScript</p> <p title="ECMAScript 2018 标准" class="desc">ECMAScript 2018 标准</p></div></a> <a href="https://markdown-it.docschina.org/" target="_blank" class="card-item row-3"><div><p class="name">markdown-it 中文文档</p> <p title="Markdown 解析器。完全支持 CommonMark 规范，并且进行语法扩展、提供可编写插件和快速编译" class="desc">Markdown 解析器。完全支持 CommonMark 规范，并且进行语法扩展、提供可编写插件和快速编译</p></div></a> <a href="https://gfm.docschina.org/zh-hans/" target="_blank" class="card-item row-3"><div><p class="name">GitHub 风格 Markdown 规范</p> <p title="正式规范基于 John MacFarlane 的 CommonMark 规范" class="desc">正式规范基于 John MacFarlane 的 CommonMark 规范</p></div></a> <a href="https://www.markdownguide.org/basic-syntax/" target="_blank" class="card-item row-3"><div><p class="name">Markdown 基本语法</p> <p title="The Markdown elements outlined in John Gruber's design document." class="desc">The Markdown elements outlined in John Gruber's design document.</p></div></a> <a href="https://graphql.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/graphql.svg" class="no-zoom"> <div><p class="name">GraphQL</p> <p title="一种用于 API 的查询语言" class="desc">一种用于 API 的查询语言</p></div></a> <a href="https://swagger.io/docs/specification/about/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/openapi.png" class="no-zoom"> <div><p class="name">OpenAPI</p> <p title="OpenAPI 规范为 RESTful API 定义了一个与语言无关的标准接口" class="desc">OpenAPI 规范为 RESTful API 定义了一个与语言无关的标准接口</p></div></a> <a href="http://json-schema.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/json-schema.svg" class="no-zoom"> <div><p class="name">JSON Schema</p> <p title="JSON Schema 是一个词汇表，可以验证、注释和操作 JSON 文档" class="desc">JSON Schema 是一个词汇表，可以验证、注释和操作 JSON 文档</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> MDN
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 提供 Web 技术文档，学习 Web 开发的最佳实践
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//developer.mozilla.org/static/img/favicon144.e7e21ca263ca.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//developer.mozilla.org/zh<span class="token punctuation">-</span>CN/docs/Web
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> ECMAScript
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> ECMAScript 2018 标准
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/ecma.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ecma262.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> markdown<span class="token punctuation">-</span>it 中文文档
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Markdown 解析器。完全支持 CommonMark 规范，并且进行语法扩展、提供可编写插件和快速编译
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//markdown<span class="token punctuation">-</span>it.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> GitHub 风格 Markdown 规范
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 正式规范基于 John MacFarlane 的 CommonMark 规范
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//gfm.docschina.org/zh<span class="token punctuation">-</span>hans/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Markdown 基本语法
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> The Markdown elements outlined in John Gruber's design document.
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.markdownguide.org/basic<span class="token punctuation">-</span>syntax/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> GraphQL
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一种用于 API 的查询语言
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/graphql.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//graphql.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> OpenAPI
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> OpenAPI 规范为 RESTful API 定义了一个与语言无关的标准接口
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/openapi.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//swagger.io/docs/specification/about/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> JSON Schema
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JSON Schema 是一个词汇表，可以验证、注释和操作 JSON 文档
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/json<span class="token punctuation">-</span>schema.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//json<span class="token punctuation">-</span>schema.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div></div><h2 id="视频音频"><a href="#视频音频" class="header-anchor">#</a> 视频音频</h2> <div class="cardListContainer"><div class="card-list"><a href="https://v2.h5player.bytedance.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/xgplayer.png" class="no-zoom"> <div><p class="name">XGPlayer</p> <p title="一款带解析器、能节省流量的HTML5视频播放器" class="desc">一款带解析器、能节省流量的HTML5视频播放器</p></div></a> <a href="http://chimee.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/75team.svg" class="no-zoom"> <div><p class="name">Chimee</p> <p title="奇舞团研制的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式" class="desc">奇舞团研制的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式</p></div></a> <a href="https://github.com/Bilibili/flv.js" target="_blank" class="card-item row-3"><div><p class="name">flv.js</p> <p title="HTML5 视频播放器以纯 JavaScript 编写，不含 Flash" class="desc">HTML5 视频播放器以纯 JavaScript 编写，不含 Flash</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> XGPlayer
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一款带解析器、能节省流量的HTML5视频播放器
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/xgplayer.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//v2.h5player.bytedance.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Chimee
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 奇舞团研制的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/75team.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//chimee.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> flv.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> HTML5 视频播放器以纯 JavaScript 编写，不含 Flash
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/Bilibili/flv.js
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></div><h2 id="函数式编程"><a href="#函数式编程" class="header-anchor">#</a> 函数式编程</h2> <div class="cardListContainer"><div class="card-list"><a href="https://cn.rx.js.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/rxjs.png" class="no-zoom"> <div><p class="name">RxJS</p> <p title="RxJS 是 Reactive Extensions 的 JavaScript 实现，可以通过响应式和函数式编程模型组合异步数据流" class="desc">RxJS 是 Reactive Extensions 的 JavaScript 实现，可以通过响应式和函数式编程模型组合异步数据流</p></div></a> <a href="http://cyclejs.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/cyclejs.svg" class="no-zoom"> <div><p class="name">Cycle.js</p> <p title="一个函数式和响应式的 JavaScript 框架，编写可观测代码" class="desc">一个函数式和响应式的 JavaScript 框架，编写可观测代码</p></div></a> <a href="https://ramda.cn/" target="_blank" class="card-item row-3"><img src="https://ramdajs.com/ramdaFilled_200x235.png" class="no-zoom"> <div><p class="name">Ramda</p> <p title="一款实用的 JavaScript 函数式编程库" class="desc">一款实用的 JavaScript 函数式编程库</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> RxJS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> RxJS 是 Reactive Extensions 的 JavaScript 实现，可以通过响应式和函数式编程模型组合异步数据流
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/rxjs.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.rx.js.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Cycle.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个函数式和响应式的 JavaScript 框架，编写可观测代码
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/cyclejs.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//cyclejs.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ramda
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一款实用的 JavaScript 函数式编程库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ramdajs.com/ramdaFilled_200x235.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ramda.cn/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></div><h2 id="angular"><a href="#angular" class="header-anchor">#</a> Angular</h2> <div class="cardListContainer"><div class="card-list"><a href="https://material.angular.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/angular.svg" class="no-zoom"> <div><p class="name">Angular Material</p> <p title="Material Design 组件库 for Angular" class="desc">Material Design 组件库 for Angular</p></div></a> <a href="https://element-angular.faas.ele.me/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/element.svg" class="no-zoom"> <div><p class="name">element-angular</p> <p title="Element UI 的 Angular 实现" class="desc">Element UI 的 Angular 实现</p></div></a> <a href="https://ionicframework.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/ionic.png" class="no-zoom"> <div><p class="name">Ionic</p> <p title="基于 Angular 的移动端跨平台 UI" class="desc">基于 Angular 的移动端跨平台 UI</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Angular Material
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Material Design 组件库 for Angular
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/angular.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//material.angular.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> element<span class="token punctuation">-</span>angular
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Element UI 的 Angular 实现
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/element.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//element<span class="token punctuation">-</span>angular.faas.ele.me/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ionic
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Angular 的移动端跨平台 UI
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/ionic.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ionicframework.com/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></div><h2 id="css"><a href="#css" class="header-anchor">#</a> CSS</h2> <div class="cardListContainer"><div class="card-list"><a href="https://sass-guidelin.es/zh/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/sass.svg" class="no-zoom"> <div><p class="name">Sass</p> <p title="Sass 是 CSS 的一个扩展，它使 CSS 的使用起来更加优雅和强大。" class="desc">Sass 是 CSS 的一个扩展，它使 CSS 的使用起来更加优雅和强大。</p></div></a> <a href="http://lesscss.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/less.svg" class="no-zoom"> <div><p class="name">Less</p> <p title="Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。" class="desc">Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。</p></div></a> <a href="https://www.zhangxinxu.com/jq/stylus/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/stylus.svg" class="no-zoom"> <div><p class="name">Stylus</p> <p title="Stylus - 富有表现力的、动态的、健壮的CSS" class="desc">Stylus - 富有表现力的、动态的、健壮的CSS</p></div></a> <a href="http://postcss.docschina.org/" target="_blank" class="card-item row-3"><img src="http://postcss.docschina.org/_/web_modules/Hero/postcss.svg" class="no-zoom"> <div><p class="name">PostCSS</p> <p title="PostCSS 是一个用 JavaScript 转换 CSS 的工具" class="desc">PostCSS 是一个用 JavaScript 转换 CSS 的工具</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Sass
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Sass 是 CSS 的一个扩展，它使 CSS 的使用起来更加优雅和强大。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/sass.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//sass<span class="token punctuation">-</span>guidelin.es/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Less
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/less.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//lesscss.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Stylus
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Stylus <span class="token punctuation">-</span> 富有表现力的、动态的、健壮的CSS
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/stylus.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.zhangxinxu.com/jq/stylus/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> PostCSS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> PostCSS 是一个用 JavaScript 转换 CSS 的工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//postcss.docschina.org/_/web_modules/Hero/postcss.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//postcss.docschina.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div><h2 id="vue-mobile"><a href="#vue-mobile" class="header-anchor">#</a> Vue(Mobile)</h2> <div class="cardListContainer"><div class="card-list"><a href="https://youzan.github.io/vant/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vant.png" class="no-zoom"> <div><p class="name">Vant</p> <p title="移动端 Vue 组件库" class="desc">移动端 Vue 组件库</p></div></a> <a href="https://didi.github.io/cube-ui/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/cube.png" class="no-zoom"> <div><p class="name">Cube UI</p> <p title="基于 Vue 实现的精致移动端组件库" class="desc">基于 Vue 实现的精致移动端组件库</p></div></a> <a href="https://didi.github.io/mand-mobile/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/mand.svg" class="no-zoom"> <div><p class="name">Mand Mobile</p> <p title="面向金融场景的 Vue 移动端组件库" class="desc">面向金融场景的 Vue 移动端组件库</p></div></a> <a href="https://mand-mobile.github.io/palette/#/home" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/mand.svg" class="no-zoom"> <div><p class="name">Mand Mobile Palette</p> <p title="可视化 Mand Mobile 主题编辑器" class="desc">可视化 Mand Mobile 主题编辑器</p></div></a> <a href="https://weex.apache.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/weex.svg" class="no-zoom"> <div><p class="name">Weex</p> <p title="基于 Vue 的移动端跨平台 UI" class="desc">基于 Vue 的移动端跨平台 UI</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vant
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 移动端 Vue 组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vant.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//youzan.github.io/vant/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Cube UI
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 实现的精致移动端组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/cube.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//didi.github.io/cube<span class="token punctuation">-</span>ui/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Mand Mobile
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 面向金融场景的 Vue 移动端组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/mand.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//didi.github.io/mand<span class="token punctuation">-</span>mobile/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Mand Mobile Palette
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 可视化 Mand Mobile 主题编辑器
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/mand.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//mand<span class="token punctuation">-</span>mobile.github.io/palette/<span class="token comment">#/home</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Weex
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 的移动端跨平台 UI
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/weex.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//weex.apache.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div></div><h2 id="vue-pc"><a href="#vue-pc" class="header-anchor">#</a> Vue(PC)</h2> <div class="cardListContainer"><div class="card-list"><a href="https://element.eleme.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/element.svg" class="no-zoom"> <div><p class="name">Element UI</p> <p title="基于 Vue 的组件库" class="desc">基于 Vue 的组件库</p></div></a> <a href="https://vuetifyjs.com/zh-Hans/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vuetify.svg" class="no-zoom"> <div><p class="name">Vuetify</p> <p title="基于 Vue 的 Material 组件库" class="desc">基于 Vue 的 Material 组件库</p></div></a> <a href="https://www.iviewui.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/iview.png" class="no-zoom"> <div><p class="name">View UI</p> <p title="基于 Vue 的组件库" class="desc">基于 Vue 的组件库</p></div></a> <a href="https://vuejs.github.io/ui/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">Vue UI Framework</p> <p title="Vue 官方 UI 组件" class="desc">Vue 官方 UI 组件</p></div></a> <a href="https://www.heyui.top/" target="_blank" class="card-item row-3"><img src="https://camo.githubusercontent.com/1424cb86c2634f96fe82db55f01f07c3c29e53a1/68747470733a2f2f7777772e68657975692e746f702f7374617469632f696d616765732f6c6f676f2e706e67" class="no-zoom"> <div><p class="name">HeyUI</p> <p title="一个基于 Vue 的高质量 UI 组件库" class="desc">一个基于 Vue 的高质量 UI 组件库</p></div></a> <a href="https://baidu.github.io/san/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/san.svg" class="no-zoom"> <div><p class="name">San</p> <p title="一个快速、轻量、灵活的 JavaScript 组件框架，兼容到 IE6" class="desc">一个快速、轻量、灵活的 JavaScript 组件框架，兼容到 IE6</p></div></a> <a href="https://vue-loader.vuejs.org/zh/" target="_blank" class="card-item row-3"><img src="https://cli.vuejs.org/favicon.png" class="no-zoom"> <div><p class="name">Vue Loader</p> <p title="vue-loader 可以将 Vue 单文件组件转换为 JavaScript 模块的 webpack loader" class="desc">vue-loader 可以将 Vue 单文件组件转换为 JavaScript 模块的 webpack loader</p></div></a> <a href="https://vuepress.vuejs.org/zh/" target="_blank" class="card-item row-3"><img src="https://vuepress.vuejs.org/hero.png" class="no-zoom"> <div><p class="name">VuePress</p> <p title="Vue 驱动的静态网站生成器" class="desc">Vue 驱动的静态网站生成器</p></div></a> <a href="https://router.vuejs.org/zh/" target="_blank" class="card-item row-3"><img src="https://cli.vuejs.org/favicon.png" class="no-zoom"> <div><p class="name">Vue Router</p> <p title="Vue.js 官方的路由管理器。" class="desc">Vue.js 官方的路由管理器。</p></div></a> <a href="https://github.com/vuejs/vue-rx/blob/master/README-CN.md" target="_blank" class="card-item row-3"><div><p class="name">vue-rx</p> <p title="vue-rx 帮助用户在 Vue 应用程序中实现简单的 RxJS 绑定" class="desc">vue-rx 帮助用户在 Vue 应用程序中实现简单的 RxJS 绑定</p></div></a> <a href="https://cli.vuejs.org/zh/" target="_blank" class="card-item row-3"><img src="https://cli.vuejs.org/favicon.png" class="no-zoom"> <div><p class="name">Vue CLI</p> <p title="🛠️ Vue.js 开发的标准工具" class="desc">🛠️ Vue.js 开发的标准工具</p></div></a> <a href="https://ssr.vuejs.org/zh/" target="_blank" class="card-item row-3"><div><p class="name">Vue SSR</p> <p title="Vue 官方提供的服务器端渲染(SSR)指南" class="desc">Vue 官方提供的服务器端渲染(SSR)指南</p></div></a> <a href="https://zh.nuxtjs.org/" target="_blank" class="card-item row-3"><img src="https://zh.nuxtjs.org/logos/nuxt-icon.png" class="no-zoom"> <div><p class="name">Nuxt.js</p> <p title="Vue.js 元框架，用于快速创建复杂、高性能的通用 Web 应用程序" class="desc">Vue.js 元框架，用于快速创建复杂、高性能的通用 Web 应用程序</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Element UI
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 的组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/element.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//element.eleme.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vuetify
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 的 Material 组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vuetify.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vuetifyjs.com/zh<span class="token punctuation">-</span>Hans/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> View UI
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 的组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/iview.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.iviewui.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue UI Framework
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue 官方 UI 组件
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vuejs.github.io/ui/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> HeyUI
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个基于 Vue 的高质量 UI 组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//camo.githubusercontent.com/1424cb86c2634f96fe82db55f01f07c3c29e53a1/68747470733a2f2f7777772e68657975692e746f702f7374617469632f696d616765732f6c6f676f2e706e67
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.heyui.top/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> San
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个快速、轻量、灵活的 JavaScript 组件框架，兼容到 IE6
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/san.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//baidu.github.io/san/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue Loader
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> vue<span class="token punctuation">-</span>loader 可以将 Vue 单文件组件转换为 JavaScript 模块的 webpack loader
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cli.vuejs.org/favicon.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vue<span class="token punctuation">-</span>loader.vuejs.org/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> VuePress
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue 驱动的静态网站生成器
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vuepress.vuejs.org/hero.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vuepress.vuejs.org/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue Router
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue.js 官方的路由管理器。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cli.vuejs.org/favicon.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//router.vuejs.org/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> vue<span class="token punctuation">-</span>rx
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> vue<span class="token punctuation">-</span>rx 帮助用户在 Vue 应用程序中实现简单的 RxJS 绑定
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/vuejs/vue<span class="token punctuation">-</span>rx/blob/master/README<span class="token punctuation">-</span>CN.md
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue CLI
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 🛠️ Vue.js 开发的标准工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cli.vuejs.org/favicon.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cli.vuejs.org/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue SSR
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue 官方提供的服务器端渲染(SSR)指南
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ssr.vuejs.org/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Nuxt.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue.js 元框架，用于快速创建复杂、高性能的通用 Web 应用程序
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//zh.nuxtjs.org/logos/nuxt<span class="token punctuation">-</span>icon.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//zh.nuxtjs.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br></div></div></div><h2 id="工具"><a href="#工具" class="header-anchor">#</a> 工具</h2> <div class="cardListContainer"><div class="card-list"><a href="https://localforage.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/lf.png" class="no-zoom"> <div><p class="name">localForage</p> <p title="通过简单类似 localStorage API 的异步数据存储来改进你的 Web 应用程序的离线体验" class="desc">通过简单类似 localStorage API 的异步数据存储来改进你的 Web 应用程序的离线体验</p></div></a> <a href="https://day.js.org/zh-CN/" target="_blank" class="card-item row-3"><img src="https://day.js.org/img/logo.png" class="no-zoom"> <div><p class="name">Day.js</p> <p title="Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。" class="desc">Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。</p></div></a> <a href="https://momentjs.com/docs/" target="_blank" class="card-item row-3"><div><p class="name">Moment.js</p> <p title="处理时间和日期的 JavaScript 函数库" class="desc">处理时间和日期的 JavaScript 函数库</p></div></a> <a href="http://lodash.think2011.net/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/lodash.svg" class="no-zoom"> <div><p class="name">Lodash</p> <p title="一个现代的 JavaScript 工具库" class="desc">一个现代的 JavaScript 工具库</p></div></a> <a href="http://hemin.cn/jq/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/jquery.svg" class="no-zoom"> <div><p class="name">jQuery API</p> <p title="jQuery API 速查表" class="desc">jQuery API 速查表</p></div></a> <a href="https://www.jquery123.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/jquery.svg" class="no-zoom"> <div><p class="name">jQuery</p> <p title="高效精简强大的工具库" class="desc">高效精简强大的工具库</p></div></a> <a href="https://zeptojs.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/zepto.png" class="no-zoom"> <div><p class="name">Zepto</p> <p title="轻量级的工具库" class="desc">轻量级的工具库</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> localForage
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 通过简单类似 localStorage API 的异步数据存储来改进你的 Web 应用程序的离线体验
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/lf.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//localforage.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Day.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//day.js.org/img/logo.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//day.js.org/zh<span class="token punctuation">-</span>CN/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Moment.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 处理时间和日期的 JavaScript 函数库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//momentjs.com/docs/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Lodash
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个现代的 JavaScript 工具库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/lodash.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//lodash.think2011.net/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> jQuery API
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> jQuery API 速查表
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/jquery.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//hemin.cn/jq/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> jQuery
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 高效精简强大的工具库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/jquery.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.jquery123.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Zepto
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 轻量级的工具库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/zepto.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//zeptojs.com/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></div><h2 id="react"><a href="#react" class="header-anchor">#</a> React</h2> <div class="cardListContainer"><div class="card-list"><a href="https://cra.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/react.svg" class="no-zoom"> <div><p class="name">Create React App</p> <p title="React 官方维护的创建 React 单页面应用的工具" class="desc">React 官方维护的创建 React 单页面应用的工具</p></div></a> <a href="https://preactjs.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/preact.png" class="no-zoom"> <div><p class="name">Preact</p> <p title="React 的 3kb 轻量化方案，拥有同样的 ES6 API" class="desc">React 的 3kb 轻量化方案，拥有同样的 ES6 API</p></div></a> <a href="https://react-router.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/react-router.svg" class="no-zoom"> <div><p class="name">React-Router</p> <p title="React 官方维护的路由库" class="desc">React 官方维护的路由库</p></div></a> <a href="https://dvajs.com/" target="_blank" class="card-item row-3"><div><p class="name">DvaJS</p> <p title="基于 React 和 redux，具有 elm 风格的轻量级框架。" class="desc">基于 React 和 redux，具有 elm 风格的轻量级框架。</p></div></a> <a href="https://elemefe.github.io/element-react/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/element.svg" class="no-zoom"> <div><p class="name">Element React</p> <p title="Element UI 的 React 实现" class="desc">Element UI 的 React 实现</p></div></a> <a href="https://youzan.github.io/zent/zh/guides/install" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/zent.png" class="no-zoom"> <div><p class="name">Zent</p> <p title="PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件" class="desc">PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件</p></div></a> <a href="https://nerv.aotu.io/" target="_blank" class="card-item row-3"><img src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67" class="no-zoom"> <div><p class="name">Nerv</p> <p title="一个基于 Virtual DOM 的类 React 组件框架" class="desc">一个基于 Virtual DOM 的类 React 组件框架</p></div></a> <a href="https://reactnative.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/react.svg" class="no-zoom"> <div><p class="name">React Native</p> <p title="基于 React 的移动端跨平台 UI" class="desc">基于 React 的移动端跨平台 UI</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Create React App
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> React 官方维护的创建 React 单页面应用的工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/react.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cra.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Preact
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> React 的 3kb 轻量化方案，拥有同样的 ES6 API
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/preact.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//preactjs.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> React<span class="token punctuation">-</span>Router
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> React 官方维护的路由库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/react<span class="token punctuation">-</span>router.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//react<span class="token punctuation">-</span>router.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> DvaJS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 React 和 redux，具有 elm 风格的轻量级框架。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//dvajs.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Element React
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Element UI 的 React 实现
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/element.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//elemefe.github.io/element<span class="token punctuation">-</span>react/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Zent
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/zent.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//youzan.github.io/zent/zh/guides/install
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Nerv
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个基于 Virtual DOM 的类 React 组件框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//nerv.aotu.io/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> React Native
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 React 的移动端跨平台 UI
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/react.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//reactnative.cn/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div></div><h2 id="web-框架"><a href="#web-框架" class="header-anchor">#</a> Web 框架</h2> <div class="cardListContainer"><div class="card-list"><a href="https://react.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/react.svg" class="no-zoom"> <div><p class="name">React</p> <p title="构建用户界面的 JavaScript 库" class="desc">构建用户界面的 JavaScript 库</p></div></a> <a href="https://cn.vuejs.org/v2/guide/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">Vue 2</p> <p title="渐进式 JavaScript 框架" class="desc">渐进式 JavaScript 框架</p></div></a> <a href="https://v3.cn.vuejs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">Vue 3</p> <p title="渐进式 JavaScript 框架" class="desc">渐进式 JavaScript 框架</p></div></a> <a href="https://angular.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/angular.svg" class="no-zoom"> <div><p class="name">Angular</p> <p title="应用程序设计框架和开发平台，用于创建高效且复杂的单页应用程序" class="desc">应用程序设计框架和开发平台，用于创建高效且复杂的单页应用程序</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> React
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 构建用户界面的 JavaScript 库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/react.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//react.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue 2
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 渐进式 JavaScript 框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.vuejs.org/v2/guide/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue 3
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 渐进式 JavaScript 框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//v3.cn.vuejs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Angular
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 应用程序设计框架和开发平台，用于创建高效且复杂的单页应用程序
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/angular.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//angular.cn/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div><h2 id="代码风格检查"><a href="#代码风格检查" class="header-anchor">#</a> 代码风格检查</h2> <div class="cardListContainer"><div class="card-list"><a href="https://cn.eslint.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/eslint.svg" class="no-zoom"> <div><p class="name">ESLint</p> <p title="可组装的、用于 JavaScript 和 JSX 的代码检查工具" class="desc">可组装的、用于 JavaScript 和 JSX 的代码检查工具</p></div></a> <a href="https://stylelint.docschina.org/" target="_blank" class="card-item row-3"><div><p class="name">StyleLint</p> <p title="一个强大的，现代的代码检查工具，可以帮助您避免错误并在您的样式中强制执行约定。" class="desc">一个强大的，现代的代码检查工具，可以帮助您避免错误并在您的样式中强制执行约定。</p></div></a> <a href="https://standardjs.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/standardjs.svg" class="no-zoom"> <div><p class="name">Standard JS</p> <p title="JavaScript 风格指南、检查工具和格式化工具" class="desc">JavaScript 风格指南、检查工具和格式化工具</p></div></a> <a href="https://vue.docschina.org/v2/style-guide/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">Vue 风格指南</p> <p title="Vue 代码的风格指南" class="desc">Vue 代码的风格指南</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> ESLint
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 可组装的、用于 JavaScript 和 JSX 的代码检查工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/eslint.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.eslint.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> StyleLint
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个强大的，现代的代码检查工具，可以帮助您避免错误并在您的样式中强制执行约定。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//stylelint.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Standard JS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JavaScript 风格指南、检查工具和格式化工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/standardjs.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//standardjs.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue 风格指南
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue 代码的风格指南
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vue.docschina.org/v2/style<span class="token punctuation">-</span>guide/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div><h2 id="node-js"><a href="#node-js" class="header-anchor">#</a> Node.js</h2> <div class="cardListContainer"><div class="card-list"><a href="http://nodejs.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/node.svg" class="no-zoom"> <div><p class="name">Node.js</p> <p title="基于 V8 引擎的 JS 运行环境" class="desc">基于 V8 引擎的 JS 运行环境</p></div></a> <a href="https://koajs.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/koa.svg" class="no-zoom"> <div><p class="name">Koa</p> <p title="新一代的 Web 后台框架" class="desc">新一代的 Web 后台框架</p></div></a> <a href="https://eggjs.org/zh-cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/egg.png" class="no-zoom"> <div><p class="name">egg</p> <p title="为企业级框架和 Node.js &amp; Koa 应用程序而生" class="desc">为企业级框架和 Node.js &amp; Koa 应用程序而生</p></div></a> <a href="http://expressjs.com/zh-cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/express.png" class="no-zoom"> <div><p class="name">Express</p> <p title="快速极简的 Web 框架" class="desc">快速极简的 Web 框架</p></div></a> <a href="https://nestjs.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/nest.png" class="no-zoom"> <div><p class="name">nest</p> <p title="渐进式 Node.js 框架，构建高效、可靠和可扩展的 server 应用程序" class="desc">渐进式 Node.js 框架，构建高效、可靠和可扩展的 server 应用程序</p></div></a> <a href="https://thinkjs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/think.png" class="no-zoom"> <div><p class="name">ThinkJS</p> <p title="能够使用完整 ES6/7 特性进行开发的 Node.js 应用程序" class="desc">能够使用完整 ES6/7 特性进行开发的 Node.js 应用程序</p></div></a> <a href="https://docs.npmjs.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/npm.png" class="no-zoom"> <div><p class="name">npm</p> <p title="npm 是 JavaScript package 管理工具，在这里可以找到可复用代码，并以强大的全新方式进行聚合" class="desc">npm 是 JavaScript package 管理工具，在这里可以找到可复用代码，并以强大的全新方式进行聚合</p></div></a> <a href="https://developer.aliyun.com/mirror/NPM?from=tnpm" target="_blank" class="card-item row-3"><img src="https://npm.taobao.org/favicon.png" class="no-zoom"> <div><p class="name">cnpm</p> <p title="淘宝提供的 npmjs.org 镜像" class="desc">淘宝提供的 npmjs.org 镜像</p></div></a> <a href="https://yarnpkg.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/yarn.png" class="no-zoom"> <div><p class="name">yarn</p> <p title="快速、可靠和安全的依赖管理" class="desc">快速、可靠和安全的依赖管理</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Node.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 V8 引擎的 JS 运行环境
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/node.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//nodejs.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Koa
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 新一代的 Web 后台框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/koa.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//koajs.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> egg
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 为企业级框架和 Node.js &amp; Koa 应用程序而生
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/egg.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//eggjs.org/zh<span class="token punctuation">-</span>cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Express
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 快速极简的 Web 框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/express.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//expressjs.com/zh<span class="token punctuation">-</span>cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> nest
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 渐进式 Node.js 框架，构建高效、可靠和可扩展的 server 应用程序
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/nest.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//nestjs.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> ThinkJS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 能够使用完整 ES6/7 特性进行开发的 Node.js 应用程序
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/think.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//thinkjs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> npm
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> npm 是 JavaScript package 管理工具，在这里可以找到可复用代码，并以强大的全新方式进行聚合
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/npm.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//docs.npmjs.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> cnpm
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 淘宝提供的 npmjs.org 镜像
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//npm.taobao.org/favicon.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//developer.aliyun.com/mirror/NPM<span class="token punctuation">?</span>from=tnpm
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> yarn
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 快速、可靠和安全的依赖管理
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/yarn.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//yarnpkg.com/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div></div><h2 id="编程教程"><a href="#编程教程" class="header-anchor">#</a> 编程教程</h2> <div class="cardListContainer"><div class="card-list"><a href="https://zh.javascript.info/" target="_blank" class="card-item row-3"><img src="https://user-images.githubusercontent.com/26959437/67275005-3df25500-f4f4-11e9-9c13-36e442ff40cc.jpg" class="no-zoom"> <div><p class="name">现代 JavaScript 教程</p> <p title="以最新的 JavaScript 标准为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。" class="desc">以最新的 JavaScript 标准为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。</p></div></a> <a href="https://rxjs-cn.github.io/learn-rxjs-operators/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/rxjs.png" class="no-zoom"> <div><p class="name">学习 RxJS 操作符</p> <p title="通过每个操作符的清晰示例及解释来进行 RxJS 的学习" class="desc">通过每个操作符的清晰示例及解释来进行 RxJS 的学习</p></div></a> <a href="https://ts.xcatliu.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/typescript.svg" class="no-zoom"> <div><p class="name">TypeScript 入门教程</p> <p title="从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript" class="desc">从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript</p></div></a> <a href="http://liubin.org/promises-book/" target="_blank" class="card-item row-3"><div><p class="name">JavaScript Promise 迷你书</p> <p title="基于 Promise 进行异步编程的基本使用方法以及测试的编写方法、应用及反模式等内容的文档" class="desc">基于 Promise 进行异步编程的基本使用方法以及测试的编写方法、应用及反模式等内容的文档</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 现代 JavaScript 教程
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 以最新的 JavaScript 标准为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//user<span class="token punctuation">-</span>images.githubusercontent.com/26959437/67275005<span class="token punctuation">-</span>3df25500<span class="token punctuation">-</span>f4f4<span class="token punctuation">-</span>11e9<span class="token punctuation">-</span>9c13<span class="token punctuation">-</span>36e442ff40cc.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//zh.javascript.info/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 学习 RxJS 操作符
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 通过每个操作符的清晰示例及解释来进行 RxJS 的学习
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/rxjs.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//rxjs<span class="token punctuation">-</span>cn.github.io/learn<span class="token punctuation">-</span>rxjs<span class="token punctuation">-</span>operators/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> TypeScript 入门教程
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/typescript.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ts.xcatliu.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> JavaScript Promise 迷你书
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Promise 进行异步编程的基本使用方法以及测试的编写方法、应用及反模式等内容的文档
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//liubin.org/promises<span class="token punctuation">-</span>book/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div><h2 id="测试工具"><a href="#测试工具" class="header-anchor">#</a> 测试工具</h2> <div class="cardListContainer"><div class="card-list"><a href="https://vue-test-utils.vuejs.org/zh/" target="_blank" class="card-item row-3"><div><p class="name">Vue Test Utils</p> <p title="Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。" class="desc">Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。</p></div></a> <a href="https://jest.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/jest.png" class="no-zoom"> <div><p class="name">Jest</p> <p title="Facebook 开发的零配置测试平台，让代码库更加稳定和健壮" class="desc">Facebook 开发的零配置测试平台，让代码库更加稳定和健壮</p></div></a> <a href="https://karma-runner.github.io/2.0/index.html" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/karma.png" class="no-zoom"> <div><p class="name">Karma</p> <p title="Karma 的主要目标是，让测试驱动开发(TDD)变得简单、快速和有趣。" class="desc">Karma 的主要目标是，让测试驱动开发(TDD)变得简单、快速和有趣。</p></div></a> <a href="https://mochajs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/mocha.svg" class="no-zoom"> <div><p class="name">Mocha</p> <p title="Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。" class="desc">Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。</p></div></a> <a href="https://jasmine.github.io/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/jasmine.png" class="no-zoom"> <div><p class="name">Jasmine</p> <p title="Jasmine 是一个用于测试 JavaScript 代码的行为驱动开发(BDD)框架" class="desc">Jasmine 是一个用于测试 JavaScript 代码的行为驱动开发(BDD)框架</p></div></a> <a href="https://pptr.dev/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/puppeteer.png" class="no-zoom"> <div><p class="name">Puppeteer</p> <p title="Puppeteer 可以通过 DevTools 协议控制 headless Chrome 或 Chromium" class="desc">Puppeteer 可以通过 DevTools 协议控制 headless Chrome 或 Chromium</p></div></a> <a href="https://sinonjs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/sinon.png" class="no-zoom"> <div><p class="name">Sinon.JS</p> <p title="用于对 JavaScript 隔离测试 spy, stub 和 mock。适用于任何单元测试框架" class="desc">用于对 JavaScript 隔离测试 spy, stub 和 mock。适用于任何单元测试框架</p></div></a> <a href="http://chaijs.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/chai.png" class="no-zoom"> <div><p class="name">Chai</p> <p title="Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库，可以与任何 JavaScript 测试框架便捷配对" class="desc">Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库，可以与任何 JavaScript 测试框架便捷配对</p></div></a> <a href="https://github.com/mjackson/expect" target="_blank" class="card-item row-3"><div><p class="name">expect</p> <p title="expect 帮助你编写更好的断言" class="desc">expect 帮助你编写更好的断言</p></div></a> <a href="https://shouldjs.github.io/" target="_blank" class="card-item row-3"><div><p class="name">Should.js</p> <p title="一个富于表现力、可读性强、与框架无关，用于 Node.js 的 BDD 风格断言库" class="desc">一个富于表现力、可读性强、与框架无关，用于 Node.js 的 BDD 风格断言库</p></div></a> <a href="http://mockjs.com/" target="_blank" class="card-item row-3"><div><p class="name">Mock.js</p> <p title="生成随机数据，拦截 Ajax 请求" class="desc">生成随机数据，拦截 Ajax 请求</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue Test Utils
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vue<span class="token punctuation">-</span>test<span class="token punctuation">-</span>utils.vuejs.org/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Jest
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Facebook 开发的零配置测试平台，让代码库更加稳定和健壮
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/jest.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//jest.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Karma
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Karma 的主要目标是，让测试驱动开发(TDD)变得简单、快速和有趣。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/karma.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//karma<span class="token punctuation">-</span>runner.github.io/2.0/index.html
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Mocha
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/mocha.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//mochajs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Jasmine
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Jasmine 是一个用于测试 JavaScript 代码的行为驱动开发(BDD)框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/jasmine.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//jasmine.github.io/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Puppeteer
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Puppeteer 可以通过 DevTools 协议控制 headless Chrome 或 Chromium
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/puppeteer.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//pptr.dev/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Sinon.JS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 用于对 JavaScript 隔离测试 spy<span class="token punctuation">,</span> stub 和 mock。适用于任何单元测试框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/sinon.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//sinonjs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Chai
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库，可以与任何 JavaScript 测试框架便捷配对
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/chai.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//chaijs.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> expect 
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> expect 帮助你编写更好的断言
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/mjackson/expect
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Should.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个富于表现力、可读性强、与框架无关，用于 Node.js 的 BDD 风格断言库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//shouldjs.github.io/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Mock.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 生成随机数据，拦截 Ajax 请求
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//mockjs.com/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div></div><h2 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h2> <div class="cardListContainer"><div class="card-list"><a href="https://webpack.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/webpack-offical.svg" class="no-zoom"> <div><p class="name">webpack</p> <p title="用于现代 JavaScript 应用程序的静态模块打包工具" class="desc">用于现代 JavaScript 应用程序的静态模块打包工具</p></div></a> <a href="https://babel.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/babel.png" class="no-zoom"> <div><p class="name">Babel</p> <p title="Babel 是 JavaScript 编译器，让你可以项目中直接使用下一代 JavaScript。" class="desc">Babel 是 JavaScript 编译器，让你可以项目中直接使用下一代 JavaScript。</p></div></a> <a href="https://parceljs.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/parcel.png" class="no-zoom"> <div><p class="name">Parcel</p> <p title="极速零配置Web应用打包工具" class="desc">极速零配置Web应用打包工具</p></div></a> <a href="https://rollup.docschina.org/guide/zh/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/rollup.svg" class="no-zoom"> <div><p class="name">rollup.js</p> <p title="新一代 JavaScript 模块打包器" class="desc">新一代 JavaScript 模块打包器</p></div></a> <a href="https://cn.vitejs.dev/" target="_blank" class="card-item row-3"><img src="https://cn.vitejs.dev/logo.svg" class="no-zoom"> <div><p class="name">Vite</p> <p title="下一代前端开发与构建工具" class="desc">下一代前端开发与构建工具</p></div></a> <a href="https://zhongsp.gitbooks.io/typescript-handbook/content/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/typescript.svg" class="no-zoom"> <div><p class="name">TypeScript</p> <p title="JavaScript 超集" class="desc">JavaScript 超集</p></div></a> <a href="https://www.gulpjs.com.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/gulp.svg" class="no-zoom"> <div><p class="name">Gulp</p> <p title="基于流的自动化构建工具" class="desc">基于流的自动化构建工具</p></div></a> <a href="https://grunt.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/grunt.svg" class="no-zoom"> <div><p class="name">Grunt</p> <p title="JavaScript 世界的构建工具" class="desc">JavaScript 世界的构建工具</p></div></a> <a href="https://lerna.js.org/" target="_blank" class="card-item row-3"><img src="https://lerna.js.org/images/lerna-hero.svg" class="no-zoom"> <div><p class="name">Lerna</p> <p title="A tool for managing JavaScript projects with multiple packages." class="desc">A tool for managing JavaScript projects with multiple packages.</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> webpack
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 用于现代 JavaScript 应用程序的静态模块打包工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/webpack<span class="token punctuation">-</span>offical.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//webpack.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Babel
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Babel 是 JavaScript 编译器，让你可以项目中直接使用下一代 JavaScript。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/babel.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//babel.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Parcel
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 极速零配置Web应用打包工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/parcel.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//parceljs.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> rollup.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 新一代 JavaScript 模块打包器
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/rollup.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//rollup.docschina.org/guide/zh/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vite
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 下一代前端开发与构建工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.vitejs.dev/logo.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.vitejs.dev/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> TypeScript
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JavaScript 超集
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/typescript.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//zhongsp.gitbooks.io/typescript<span class="token punctuation">-</span>handbook/content/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Gulp
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于流的自动化构建工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/gulp.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.gulpjs.com.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Grunt
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JavaScript 世界的构建工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/grunt.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//grunt.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Lerna
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> A tool for managing JavaScript projects with multiple packages.
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lerna.js.org/images/lerna<span class="token punctuation">-</span>hero.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lerna.js.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div></div><h2 id="模板引擎"><a href="#模板引擎" class="header-anchor">#</a> 模板引擎</h2> <div class="cardListContainer"><div class="card-list"><a href="https://ejs.co/" target="_blank" class="card-item row-3"><div><p class="name">EJS</p> <p title="Embedded JavaScript templating." class="desc">Embedded JavaScript templating.</p></div></a> <a href="https://pugjs.org/" target="_blank" class="card-item row-3"><div><p class="name">pug</p> <p title="JavaScript 模板引擎" class="desc">JavaScript 模板引擎</p></div></a> <a href="https://handlebarsjs.com/" target="_blank" class="card-item row-3"><div><p class="name">Handlebars.js</p> <p title="Minimal templating on steroids" class="desc">Minimal templating on steroids</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> EJS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Embedded JavaScript templating.
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ejs.co/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> pug
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JavaScript 模板引擎
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//pugjs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Handlebars.js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Minimal templating on steroids
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//handlebarsjs.com/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></div><h2 id="状态管理"><a href="#状态管理" class="header-anchor">#</a> 状态管理</h2> <div class="cardListContainer"><div class="card-list"><a href="https://cn.mobx.js.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/mobx.png" class="no-zoom"> <div><p class="name">Mobx</p> <p title="简单、可扩展的状态管理" class="desc">简单、可扩展的状态管理</p></div></a> <a href="https://cn.redux.js.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/redux.svg" class="no-zoom"> <div><p class="name">Redux</p> <p title="JavaScript 状态容器，提供可预测化的状态管理" class="desc">JavaScript 状态容器，提供可预测化的状态管理</p></div></a> <a href="https://rematch.gitbook.io/handbook/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/rematch.png" class="no-zoom"> <div><p class="name">Rematch</p> <p title="Rematch 是没有 boilerplate 的 Redux 最佳实践" class="desc">Rematch 是没有 boilerplate 的 Redux 最佳实践</p></div></a> <a href="https://vuex.vuejs.org/zh/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">Vuex</p> <p title="vuex 是 Vue 官方提供的状态管理工具" class="desc">vuex 是 Vue 官方提供的状态管理工具</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Mobx
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 简单、可扩展的状态管理
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/mobx.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.mobx.js.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Redux
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JavaScript 状态容器，提供可预测化的状态管理
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/redux.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cn.redux.js.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Rematch
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Rematch 是没有 boilerplate 的 Redux 最佳实践
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/rematch.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//rematch.gitbook.io/handbook/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vuex
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> vuex 是 Vue 官方提供的状态管理工具
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//vuex.vuejs.org/zh/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div><h2 id="技术周刊"><a href="#技术周刊" class="header-anchor">#</a> 技术周刊</h2> <div class="cardListContainer"><div class="card-list"><a href="https://docschina.org/weekly/js/docs/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/docschina-logo.svg" class="no-zoom"> <div><p class="name">印记中文周刊 - JavaScript</p> <p title="关于 JavaScript 的文章、新闻和项目的周刊" class="desc">关于 JavaScript 的文章、新闻和项目的周刊</p></div></a> <a href="https://docschina.org/weekly/react/docs/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/docschina-logo.svg" class="no-zoom"> <div><p class="name">印记中文周刊 - React</p> <p title="关于 React 的文章、新闻和项目的周刊" class="desc">关于 React 的文章、新闻和项目的周刊</p></div></a> <a href="https://nodeweekly.com/" target="_blank" class="card-item row-3"><div><p class="name">Node Weekly</p> <p title="Node.js 新闻和文章" class="desc">Node.js 新闻和文章</p></div></a> <a href="https://css-weekly.com/" target="_blank" class="card-item row-3"><img src="https://css-weekly.com/wp-content/themes/cssweekly/img/cssweekly-logo.png" class="no-zoom"> <div><p class="name">CSS Weekly</p> <p title="CSS 文章、教程、实验、工具等摘要" class="desc">CSS 文章、教程、实验、工具等摘要</p></div></a> <a href="https://news.vuejs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">Vue news</p> <p title="Vue 官方提供的最新实时动态资讯" class="desc">Vue 官方提供的最新实时动态资讯</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 印记中文周刊 <span class="token punctuation">-</span> JavaScript
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 关于 JavaScript 的文章、新闻和项目的周刊
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/docschina<span class="token punctuation">-</span>logo.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//docschina.org/weekly/js/docs/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 印记中文周刊 <span class="token punctuation">-</span> React
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 关于 React 的文章、新闻和项目的周刊
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/docschina<span class="token punctuation">-</span>logo.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//docschina.org/weekly/react/docs/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Node Weekly
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Node.js 新闻和文章
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//nodeweekly.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> CSS Weekly
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> CSS 文章、教程、实验、工具等摘要
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//css<span class="token punctuation">-</span>weekly.com/wp<span class="token punctuation">-</span>content/themes/cssweekly/img/cssweekly<span class="token punctuation">-</span>logo.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//css<span class="token punctuation">-</span>weekly.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vue news
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Vue 官方提供的最新实时动态资讯
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//news.vuejs.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div></div><h2 id="小程序框架"><a href="#小程序框架" class="header-anchor">#</a> 小程序框架</h2> <div class="cardListContainer"><div class="card-list"><a href="https://remaxjs.org/" target="_blank" class="card-item row-3"><img src="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*1NHAQYduQiQAAAAAAAAAAABkARQnAQ" class="no-zoom"> <div><p class="name">Remax</p> <p title="使用真正的 React 构建跨平台小程序" class="desc">使用真正的 React 构建跨平台小程序</p></div></a> <a href="https://taro.jd.com/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/taro.png" class="no-zoom"> <div><p class="name">Taro</p> <p title="Taro 是一套遵循 React 语法规范的 多端开发 解决方案。" class="desc">Taro 是一套遵循 React 语法规范的 多端开发 解决方案。</p></div></a> <a href="https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/" target="_blank" class="card-item row-3"><div><p class="name">kbone</p> <p title="kbone 用于支持一个项目可以同时在 Web 端和小程序端被使用" class="desc">kbone 用于支持一个项目可以同时在 Web 端和小程序端被使用</p></div></a> <a href="https://tencent.github.io/omi/" target="_blank" class="card-item row-3"><img src="https://camo.githubusercontent.com/5a3ce051411cca4d8abd0e0abff879bb5a871520/68747470733a2f2f74656e63656e742e6769746875622e696f2f6f6d692f6173736574732f6f6d692d6c6f676f323031392e737667" class="no-zoom"> <div><p class="name">omi/omip</p> <p title="Omi 可以开发桌面 Web、移动 H5，同时支持开发小程序" class="desc">Omi 可以开发桌面 Web、移动 H5，同时支持开发小程序</p></div></a> <a href="https://github.com/Tencent/wepy" target="_blank" class="card-item row-3"><img src="https://opensource.tencent.com/img/wepy.png" class="no-zoom"> <div><p class="name">WePY</p> <p title="WePY 是一款让小程序支持组件化开发的框架" class="desc">WePY 是一款让小程序支持组件化开发的框架</p></div></a> <a href="http://mpvue.com/" target="_blank" class="card-item row-3"><img src="http://mpvue.com/assets/img/logo.0aaccdfd.png" class="no-zoom"> <div><p class="name">mpvue</p> <p title="mpvue 是一个使用 Vue.js 开发小程序的前端框架。" class="desc">mpvue 是一个使用 Vue.js 开发小程序的前端框架。</p></div></a> <a href="https://didi.github.io/mpx/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/mpx-logo.png" class="no-zoom"> <div><p class="name">mpx</p> <p title="一款具有优秀开发体验和深度性能优化的增强型小程序开发框架。" class="desc">一款具有优秀开发体验和深度性能优化的增强型小程序开发框架。</p></div></a> <a href="https://megalojs.org/#/" target="_blank" class="card-item row-3"><img src="https://megalojs.org/static/megalo.png" class="no-zoom"> <div><p class="name">megalo</p> <p title="基于 Vue 的小程序框架" class="desc">基于 Vue 的小程序框架</p></div></a> <a href="https://cml.js.org/" target="_blank" class="card-item row-3"><img src="https://camo.githubusercontent.com/9a6e165b9188a8ac4e5173bc382688a418fad711/68747470733a2f2f636d6c2e6a732e6f72672f646f632f6173736574732f3130302a3130302e706e67" class="no-zoom"> <div><p class="name">Chameleon 变色龙</p> <p title="跨端统一解决方案，一套代码运行多端，一端所见即多端所见" class="desc">跨端统一解决方案，一套代码运行多端，一端所见即多端所见</p></div></a> <a href="https://uniapp.dcloud.io/" target="_blank" class="card-item row-3"><div><p class="name">uni-app</p> <p title="uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码" class="desc">uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Remax
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 使用真正的 React 构建跨平台小程序
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A<span class="token important">*1NHAQYduQiQAAAAAAAAAAABkARQnAQ</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//remaxjs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Taro
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Taro 是一套遵循 React 语法规范的 多端开发 解决方案。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/taro.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//taro.jd.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> kbone
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> kbone 用于支持一个项目可以同时在 Web 端和小程序端被使用
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//developers.weixin.qq.com/miniprogram/dev/extended/kbone/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> omi/omip
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Omi 可以开发桌面 Web、移动 H5，同时支持开发小程序
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//camo.githubusercontent.com/5a3ce051411cca4d8abd0e0abff879bb5a871520/68747470733a2f2f74656e63656e742e6769746875622e696f2f6f6d692f6173736574732f6f6d692d6c6f676f323031392e737667
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//tencent.github.io/omi/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> WePY
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> WePY 是一款让小程序支持组件化开发的框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//opensource.tencent.com/img/wepy.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/Tencent/wepy
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> mpvue
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> mpvue 是一个使用 Vue.js 开发小程序的前端框架。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//mpvue.com/assets/img/logo.0aaccdfd.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//mpvue.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> mpx
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一款具有优秀开发体验和深度性能优化的增强型小程序开发框架。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/mpx<span class="token punctuation">-</span>logo.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//didi.github.io/mpx/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> megalo
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 的小程序框架
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//megalojs.org/static/megalo.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//megalojs.org/<span class="token comment">#/</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Chameleon 变色龙
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 跨端统一解决方案，一套代码运行多端，一端所见即多端所见
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//camo.githubusercontent.com/9a6e165b9188a8ac4e5173bc382688a418fad711/68747470733a2f2f636d6c2e6a732e6f72672f646f632f6173736574732f3130302a3130302e706e67
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cml.js.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> uni<span class="token punctuation">-</span>app
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> uni<span class="token punctuation">-</span>app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> 
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//uniapp.dcloud.io/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div></div><h2 id="可视化工具"><a href="#可视化工具" class="header-anchor">#</a> 可视化工具</h2> <div class="cardListContainer"><div class="card-list"><a href="https://threejs.docschina.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/threejs.png" class="no-zoom"> <div><p class="name">Threejs</p> <p title="JavaScript 3d 库" class="desc">JavaScript 3d 库</p></div></a> <a href="https://echarts.apache.org/zh/index.html" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/echarts.png" class="no-zoom"> <div><p class="name">Apache ECharts</p> <p title="一个基于 JavaScript 的开源可视化图表库" class="desc">一个基于 JavaScript 的开源可视化图表库</p></div></a> <a href="http://spritejs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/spritejs.png" class="no-zoom"> <div><p class="name">SpriteJS</p> <p title="SpriteJS 是跨平台的高性能图形系统，它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。" class="desc">SpriteJS 是跨平台的高性能图形系统，它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。</p></div></a> <a href="https://antv.alipay.com/zh-cn/index.html" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/antv.svg" class="no-zoom"> <div><p class="name">AntV 可视化解决方案</p> <p title="基于全新一代数据可视化解决方案 AntV" class="desc">基于全新一代数据可视化解决方案 AntV</p></div></a> <a href="https://d3js.org.cn/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/d3.svg" class="no-zoom"> <div><p class="name">D3js</p> <p title="D3js 是一个可以基于数据来操作文档的 JavaScript 库。" class="desc">D3js 是一个可以基于数据来操作文档的 JavaScript 库。</p></div></a> <a href="https://v-charts.js.org/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/vue.svg" class="no-zoom"> <div><p class="name">v-charts</p> <p title="基于 Vue 和 ECharts 封装的图表组件" class="desc">基于 Vue 和 ECharts 封装的图表组件</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Threejs
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> JavaScript 3d 库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/threejs.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//threejs.docschina.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Apache ECharts
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个基于 JavaScript 的开源可视化图表库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/echarts.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//echarts.apache.org/zh/index.html
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> SpriteJS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> SpriteJS 是跨平台的高性能图形系统，它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/spritejs.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//spritejs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> AntV 可视化解决方案
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于全新一代数据可视化解决方案 AntV
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/antv.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//antv.alipay.com/zh<span class="token punctuation">-</span>cn/index.html
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> D3js
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> D3js 是一个可以基于数据来操作文档的 JavaScript 库。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/d3.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//d3js.org.cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> v<span class="token punctuation">-</span>charts
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 基于 Vue 和 ECharts 封装的图表组件
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/vue.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//v<span class="token punctuation">-</span>charts.js.org/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div></div><h2 id="umijs-框架"><a href="#umijs-框架" class="header-anchor">#</a> UmiJS 框架</h2> <div class="cardListContainer"><div class="card-list"><a href="https://umijs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.nlark.com/yuque/0/2019/png/94593/1557474097153-avatar/eaebf94d-aaea-45ad-b2f3-9c0d4b0abbe6.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng" class="no-zoom"> <div><p class="name">UmiJS</p> <p title="Extensible enterprise-level front-end application framework." class="desc">Extensible enterprise-level front-end application framework.</p></div></a> <a href="https://qiankun.umijs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.nlark.com/yuque/0/2019/png/94593/1557474097153-avatar/eaebf94d-aaea-45ad-b2f3-9c0d4b0abbe6.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng" class="no-zoom"> <div><p class="name">qiankun</p> <p title="Probably the most complete micro-frontends solution you ever met🧐" class="desc">Probably the most complete micro-frontends solution you ever met🧐</p></div></a> <a href="https://d.umijs.org/" target="_blank" class="card-item row-3"><img src="https://cdn.nlark.com/yuque/0/2019/png/94593/1557474097153-avatar/eaebf94d-aaea-45ad-b2f3-9c0d4b0abbe6.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng" class="no-zoom"> <div><p class="name">dumi</p> <p title="📖 A doc tool can assist you to develop libraries &amp; write docs." class="desc">📖 A doc tool can assist you to develop libraries &amp; write docs.</p></div></a> <a href="https://www.yuque.com/umijs/umi" target="_blank" class="card-item row-3"><img src="https://cdn.nlark.com/yuque/0/2019/png/94593/1557474097153-avatar/eaebf94d-aaea-45ad-b2f3-9c0d4b0abbe6.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng" class="no-zoom"> <div><p class="name">Umi入门</p> <p title="简易的 umi 入门教程， step-by-step 的学习，适合零基础的朋友" class="desc">简易的 umi 入门教程， step-by-step 的学习，适合零基础的朋友</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> UmiJS
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Extensible enterprise<span class="token punctuation">-</span>level front<span class="token punctuation">-</span>end application framework.
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.nlark.com/yuque/0/2019/png/94593/1557474097153<span class="token punctuation">-</span>avatar/eaebf94d<span class="token punctuation">-</span>aaea<span class="token punctuation">-</span>45ad<span class="token punctuation">-</span>b2f3<span class="token punctuation">-</span>9c0d4b0abbe6.png<span class="token punctuation">?</span>x<span class="token punctuation">-</span>oss<span class="token punctuation">-</span>process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//umijs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> qiankun
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Probably the most complete micro<span class="token punctuation">-</span>frontends solution you ever met🧐
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.nlark.com/yuque/0/2019/png/94593/1557474097153<span class="token punctuation">-</span>avatar/eaebf94d<span class="token punctuation">-</span>aaea<span class="token punctuation">-</span>45ad<span class="token punctuation">-</span>b2f3<span class="token punctuation">-</span>9c0d4b0abbe6.png<span class="token punctuation">?</span>x<span class="token punctuation">-</span>oss<span class="token punctuation">-</span>process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qiankun.umijs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> dumi
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 📖 A doc tool can assist you to develop libraries &amp; write docs.
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.nlark.com/yuque/0/2019/png/94593/1557474097153<span class="token punctuation">-</span>avatar/eaebf94d<span class="token punctuation">-</span>aaea<span class="token punctuation">-</span>45ad<span class="token punctuation">-</span>b2f3<span class="token punctuation">-</span>9c0d4b0abbe6.png<span class="token punctuation">?</span>x<span class="token punctuation">-</span>oss<span class="token punctuation">-</span>process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//d.umijs.org/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Umi入门
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 简易的 umi 入门教程， step<span class="token punctuation">-</span>by<span class="token punctuation">-</span>step 的学习，适合零基础的朋友
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.nlark.com/yuque/0/2019/png/94593/1557474097153<span class="token punctuation">-</span>avatar/eaebf94d<span class="token punctuation">-</span>aaea<span class="token punctuation">-</span>45ad<span class="token punctuation">-</span>b2f3<span class="token punctuation">-</span>9c0d4b0abbe6.png<span class="token punctuation">?</span>x<span class="token punctuation">-</span>oss<span class="token punctuation">-</span>process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.yuque.com/umijs/umi
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div><h2 id="ant-design-系列"><a href="#ant-design-系列" class="header-anchor">#</a> ant design 系列</h2> <div class="cardListContainer"><div class="card-list"><a href="https://ant.design/index-cn" target="_blank" class="card-item row-3"><img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" class="no-zoom"> <div><p class="name">Ant Design</p> <p title="企业级的 UI 设计语言和 React 实现" class="desc">企业级的 UI 设计语言和 React 实现</p></div></a> <a href="https://pro.ant.design/index-cn/" target="_blank" class="card-item row-3"><img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" class="no-zoom"> <div><p class="name">ANT DESIGN PRO</p> <p title="开箱即用的中台前端/设计解决方案" class="desc">开箱即用的中台前端/设计解决方案</p></div></a> <a href="https://mobile.ant.design/" target="_blank" class="card-item row-3"><img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" class="no-zoom"> <div><p class="name">Ant Design Mobile</p> <p title="一个基于 Preact / React / React Native 的 UI 组件库" class="desc">一个基于 Preact / React / React Native 的 UI 组件库</p></div></a> <a href="https://antdv.com/" target="_blank" class="card-item row-3"><img src="https://pro.antdv.com/logo.png" class="no-zoom"> <div><p class="name">Ant Design of Vue</p> <p title="Ant Design 的 Vue 实现，开发和服务于企业级后台产品。" class="desc">Ant Design 的 Vue 实现，开发和服务于企业级后台产品。</p></div></a> <a href="https://pro.antdv.com/" target="_blank" class="card-item row-3"><img src="https://pro.antdv.com/logo.png" class="no-zoom"> <div><p class="name">ANTD PRO VUE</p> <p title="开箱即用的中台前端/设计解决方案" class="desc">开箱即用的中台前端/设计解决方案</p></div></a> <a href="https://ng.ant.design/docs/introduce/zh" target="_blank" class="card-item row-3"><img src="https://ng.ant.design/assets/img/logo.svg" class="no-zoom"> <div><p class="name">NG-ZORRO</p> <p title="ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。" class="desc">ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。</p></div></a> <a href="http://ng.mobile.ant.design/" target="_blank" class="card-item row-3"><img src="https://gw.alicdn.com/tfs/TB18WVWJpzqK1RjSZSgXXcpAVXa-106-120.svg" class="no-zoom"> <div><p class="name">NG-ZORRO-MOBILE</p> <p title="Ant Design 移动规范的 Angular 实现，服务于阿里巴巴集团数据无线业务。" class="desc">Ant Design 移动规范的 Angular 实现，服务于阿里巴巴集团数据无线业务。</p></div></a> <a href="https://ng-alain.com/" target="_blank" class="card-item row-3"><img src="https://ng-alain.com/assets/img/logo-color.svg" class="no-zoom"> <div><p class="name">NG-ALAIN</p> <p title="一个基于 Antd 中后台前端解决方案，提供更多通用性业务模块，让开发者更加专注于业务。" class="desc">一个基于 Antd 中后台前端解决方案，提供更多通用性业务模块，让开发者更加专注于业务。</p></div></a> <a href="https://ux.ant.design/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/antdesign.svg" class="no-zoom"> <div><p class="name">Ant UX</p> <p title="用于 OG, Sketch, Axure, Affinity, Adobe XD 等 UX 的 sitemap 模板" class="desc">用于 OG, Sketch, Axure, Affinity, Adobe XD 等 UX 的 sitemap 模板</p></div></a> <a href="http://react-component.github.io/badgeboard/" target="_blank" class="card-item row-3"><img src="https://cdn.docschina.org/home/logo/antdesign.svg" class="no-zoom"> <div><p class="name">react-component</p> <p title="ant design 内部使用的 React 基础组件" class="desc">ant design 内部使用的 React 基础组件</p></div></a></div><div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ant Design
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 企业级的 UI 设计语言和 React 实现
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ant.design/index<span class="token punctuation">-</span>cn
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> ANT DESIGN PRO
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 开箱即用的中台前端/设计解决方案
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//pro.ant.design/index<span class="token punctuation">-</span>cn/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ant Design Mobile
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个基于 Preact / React / React Native 的 UI 组件库
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//mobile.ant.design/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ant Design of Vue
  <span class="token key atrule">desc</span><span class="token punctuation">:</span>  Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//pro.antdv.com/logo.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//antdv.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> ANTD PRO VUE
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 开箱即用的中台前端/设计解决方案
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//pro.antdv.com/logo.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//pro.antdv.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> NG<span class="token punctuation">-</span>ZORRO
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> ng<span class="token punctuation">-</span>zorro<span class="token punctuation">-</span>antd 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ng.ant.design/assets/img/logo.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ng.ant.design/docs/introduce/zh
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> NG<span class="token punctuation">-</span>ZORRO<span class="token punctuation">-</span>MOBILE
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> Ant Design 移动规范的 Angular 实现，服务于阿里巴巴集团数据无线业务。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//gw.alicdn.com/tfs/TB18WVWJpzqK1RjSZSgXXcpAVXa<span class="token punctuation">-</span>106<span class="token punctuation">-</span>120.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//ng.mobile.ant.design/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> NG<span class="token punctuation">-</span>ALAIN
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一个基于 Antd 中后台前端解决方案，提供更多通用性业务模块，让开发者更加专注于业务。
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ng<span class="token punctuation">-</span>alain.com/assets/img/logo<span class="token punctuation">-</span>color.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ng<span class="token punctuation">-</span>alain.com/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ant UX
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 用于 OG<span class="token punctuation">,</span> Sketch<span class="token punctuation">,</span> Axure<span class="token punctuation">,</span> Affinity<span class="token punctuation">,</span> Adobe XD 等 UX 的 sitemap 模板
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/antdesign.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//ux.ant.design/
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> react<span class="token punctuation">-</span>component
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> ant design 内部使用的 React 基础组件
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.docschina.org/home/logo/antdesign.svg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//react<span class="token punctuation">-</span>component.github.io/badgeboard/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div></div></div></div> <div class="page-edit"><div class="tags"><a href="/blogs/tags/?tag=%E5%8D%B0%E8%AE%B0%E4%B8%AD%E6%96%87" title="标签">#印记中文</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/03/02 20:50:44</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/blogs/web/docs/runoob/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">菜鸟教程</div></a> <a href="/blogs/web/html/4b098b17ce152/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">HTML 语言简介</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/blogs/web/docs/runoob/" class="prev">菜鸟教程</a></span> <span class="next"><a href="/blogs/web/html/4b098b17ce152/">HTML 语言简介</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-12"><div class="article-title"><a href="/blogs/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/blogs/resource-tools/8396c1c08f1b6/"><div>一些前端开发的干货</div></a></div> <div class="date"><span>2021/02/28 02:29:20</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/blogs/resource-tools/3b17bb5dd2c98/"><div>全球开放电子图书馆及免费资源</div></a></div> <div class="date"><span>2021/02/23 00:12:54</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/blogs/pages/6de420b96e052/"><div>中国图书馆图书分类法</div></a></div> <div class="date"><span>2021/02/19 15:51:48</span></div></dt></dl> <div class="more-box"><a href="/blogs/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-ae53833e data-v-ae53833e><span class="footer-reco-theme" data-v-ae53833e><i class="iconfont reco-theme" data-v-ae53833e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-ae53833e>vuepress-theme-reco@1.6.1</a> <a target="blank" href="https://doc.xugaoyi.com/" class="vdoing ml5" data-v-ae53833e>vuepress-theme-vdoing@1.7.2</a></span> <!----> <span class="footer-copyright" data-v-ae53833e><i class="iconfont reco-copyright" data-v-ae53833e></i> <a data-v-ae53833e><span data-v-ae53833e>凯小默</span> <span class="ml5" data-v-ae53833e>
          2019 - 2021
        </span></a></span> <span class="footer-view-site" data-v-ae53833e><i class="iconfont reco-eye" data-v-ae53833e></i> <span id="busuanzi_container_site_uv" data-v-ae53833e>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-ae53833e>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-ae53833e>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-ae53833e>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div><APlayer audio="" fixed="true" mini="true" theme="#3eaf7c" loop="loop" order="random" preload="auto" volume="1" mutex="true" lrc-type="0" list-folded="true" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer></div></div>
    <script src="/blogs/assets/js/app.c4a9ac0d.js" defer></script><script src="/blogs/assets/js/2.a11320bc.js" defer></script><script src="/blogs/assets/js/31.beec2977.js" defer></script><script src="/blogs/assets/js/6.b06f02ee.js" defer></script>
  </body>
</html>
